<template>
    <div class="pagem flex-col">
        <div class="sectiond_1" v-loading.fullscreen.lock="isLoading" element-loading-text="加载中">
            <div class="groupm_1 flex-rowc">
                <div class="banner">
                    <el-headers></el-headers>
                </div>
            </div>
            <div class="boxm_2 flex-col">
                <div class="boxm_3 flex-col">
                    <span class="textn_2">账号设置</span>
                    <div class="image_2m" />

                    <el-form label-width="100px" class="demo-ruleForma">

                        <el-form-item label="头像:" prop="avatar" class="el-form-itema">

                            <div style="margin-top: -29px;background-color: unset;">
                                <!-- <div class="block"><el-avatar shape="square" :size="100"
                                    :src="userinfo_dialog.avatar"></el-avatar></div> -->

                                <el-upload :action="this.upImgUrl" name="img" :on-success="fileSuccess"
                                    :before-upload="beforeAvatarUpload" :src="userinfoList.avatar">
                                    <div class="block">
                                        <el-avatar shape="square" :size="100" :src="userinfo_dialog.avatar"></el-avatar>
                                    </div>
                                </el-upload>


                                <!-- <el-dialog :visible.sync="dialogVisible">
                                <img class="imagem_2" referrerpolicy="no-referrer" :src="userinfo_dialog.avatar" />
                            </el-dialog> -->
                            </div>
                        </el-form-item>
                        <el-form-item label="姓名：" prop="user_name" class="el-form-itema">
                            <el-input v-model="userinfo_dialog.username"></el-input><!----->
                        </el-form-item>
                        <el-form-item label="性别：" prop="gender" class="el-form-itema">
                            <!-- <el-radio label="1" v-model="userinfo_dialog.gender" style="background-color: #fff;">男</el-radio>
                        <el-radio label="2" v-model="userinfo_dialog.gender" style="background-color: #fff;"  @change="handleRadioChange">女</el-radio>
                        {{ userinfo_dialog.gender }} -->
                            <el-radio v-model="gender" label="0">男</el-radio>
                            <el-radio v-model="gender" label="1">女</el-radio>
                            <!-- {{ gender }} -->
                        </el-form-item>
                        <el-form-item label="政治面貌" prop="political" class="el-form-itema" v-if="isOpen">
                            <el-input v-model="userinfo_dialog.political" @change="handleRadioChange"></el-input>
                        </el-form-item>
                        <el-form-item label="毕业学校：" prop="graduate_school" class="el-form-itema">
                            <el-input v-model="userinfo_dialog.graduate_school"></el-input>
                        </el-form-item>
                        <el-form-item label="毕业时间：" prop="graduate_time" class="el-form-itema">
                            <el-date-picker type="date" placeholder="选择日期" v-model="userinfo_dialog.graduate_time"
                                value-format="yyyy-MM-dd">
                            </el-date-picker><!---->
                        </el-form-item>
                        <el-form-item label="学历" prop="education" class="el-form-itema" v-if="isOpen">
                            <el-input v-model="userinfo_dialog.education"></el-input>
                        </el-form-item><!---->
                        <el-form-item label="求职状态：" prop="job_status" class="el-form-itema">
                            <el-select v-model="userinfo_dialog.job_status" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item><!---->
                        <el-form-item style="margin-top: 100px;">
                            <el-button type="primary" @click="submitForm()"><span>保存</span></el-button>
                            <el-button @click="cancel()">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <el-footers></el-footers>
    </div>
</template>
<script>
import elHeaders from "../../common/elHeaders.vue";
import elFooters from "../../common/elFooters.vue";
import { upImgUrl } from '../../utils/baseUrl.js'
export default {
    data() {
        return {
            constants: {},
            userinfoList: [],
            userinfo_dialog: {
                avatar: '',
                user_name: '',
                graduate_time: '',
                graduate_school: '',
                job_status: '',
                education: '',
                political: ''
            },
            isLoading: false,
            dialogImageUrl: '',
            dialogVisible: false,
            isOpen: false,
            img: '',
            radio: '1',
            gender: '1',
            options: [{
                value: '1',
                label: '在职，不打算找工作'
            }, {
                value: '2',
                label: '在职，考虑机会'
            },
            {
                value: '3',
                label: '离职，正在找工作'
            },
            {
                value: '4',
                label: '在校，正在找工作'
            },],
            upImgUrl: ''
        };
    },
    created() {
        this.upImgUrl = upImgUrl
    },
    components: {
        elFooters,
        elHeaders
    },
    mounted() {
        this.getBaseInfo()
    },
    methods: {
        handleRadioChange(value) {
            // console.log(this.userinfo_dialog.political);
        },
        fileSuccess(file) {
            this.userinfoList.avatar = file.info.img_url
            console.log(this.userinfoList.avatar);
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 5MB!');
            }
            return isLt2M;
        },
        handleClose() {
            this.dialogVisible = false;
        },
        async submitForm() {
            const res = await this.$service.post({
                url: '/api/zp/v1/zpapp_change_userinfo',
                data: {
                    avatar: this.userinfoList.avatar,
                    gender: this.gender,
                    political: this.userinfo_dialog.political,
                    user_name: this.userinfo_dialog.username,
                    graduate_time: this.userinfo_dialog.graduate_time,
                    job_status: this.userinfo_dialog.job_status,
                    graduate_school: this.userinfo_dialog.graduate_school,
                    education: this.userinfo_dialog.education,
                }
            })

            if (res.code === 1) {
                localStorage.setItem('avatar user_logo', this.userinfoList.avatar);
                console.log(this.userinfoList.avatar,'this.userinfoList.avatar');
                localStorage.setItem('username', this.userinfo_dialog.username);
                this.getBaseInfo()
                this.$message('操作成功')
                setTimeout(() => {
                    this.refresh()
                }, 1700);
                this.$router.push("./personalCenter")
            } if (res.code === 0) {
                this.$message(res.msg)
            } if (res.code === -1) {
                this.$router.push('login')
            }

        },
        async getBaseInfo() {
            this.isLoading = true
            const res = await this.$service.get({
                url: '/api/zp/v1/zpapp_get_userinfo',
            })
            this.userinfoList = res.info;
            this.userinfo_dialog = this.userinfoList;
            this.userinfo_dialog.username = this.userinfoList.username;
            this.userinfo_dialog.political = this.userinfoList.political.toString();
            this.gender = String(this.userinfoList.gender);
            this.userinfo_dialog.graduate_time = this.userinfoList.graduate_time;
            this.userinfo_dialog.graduate_school = this.userinfoList.graduate_school;
            this.userinfo_dialog.job_status = this.userinfo_dialog.job_status;
            this.userinfo_dialog.education = this.userinfoList.education;
            localStorage.setItem('avatar user_logo', this.userinfoList.avatar);
            // console.log(  this.userinfoList.avatar,'====');
            if (res.code == -1) {
                this.$router.push("./login")
            }
            if (this.userinfoList.avatar == '/static/sleep-png.png') {
                this.userinfo_dialog.avatar = ''
            }
            this.isLoading = false
        },
        confirmSelection() {
            this.dialogVisible = false;
        },
        //刷新
        refresh() {
            location.reload();
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        personalCenter() {
            this.$router.push("/personalCenter")
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        shixi() {
            this.$router.push("/shixi")
        },
        taction() {
            this.$router.push("./taction")
        },
        schoolRecruitment() {
            this.$router.push("./schoolRecruitment")
        },
        index() {
            this.$router.push("./index")
        },
        detail() {
            this.$router.push("/detail")
        },
        company() {
            this.$router.push("/company")
        },
        cancel() {
            setTimeout(() => {
                this.refresh()
            }, 1700);
            this.$router.push("./personalCenter")
        },
    },
};
</script>

<style>
.pagem {
    background-color: rgba(242, 242, 242, 1);
    position: relative;
    /* width: 1512px; */
    /* height: 1509px; */
    overflow: hidden;
    margin: 0 auto;
}

.groupm_1 {
    background-color: rgb(255, 254, 254);
    /* width: 1920px; */
    height: 117px;
    /* margin-left: 114px; */

}

.banner {
    width: 1200px;
    margin: 0 auto;
}

.groupm_1 .banner {
    width: 1200px;
    display: flex;
    background-color: #fff;
    position: relative;
    justify-content: end;
    height: 103px;
}

.imagem_1 {
    width: 221px;
    height: 51px;
    margin: 31px 0 0 148px;
    background-color: #fff;
}

.textmm_1 {
    width: 32px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 49px 0 0 152px;
    background-color: #fff;
}

.textm_2 {
    width: 64px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 49px 0 0 52px;
    background-color: #fff;
}

.textm_3 {
    width: 64px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 49px 0 0 74px;
    background-color: #fff;
}

.textm_4 {
    width: 64px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 49px 0 0 80px;
    background-color: #fff;
}

.textm_5 {
    width: 153px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(217, 4, 3, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 49px 0 0 83px;
    background-color: #fff;
}

.imagem_2 {
    width: 54px;
    height: 54px;
    margin: 36px 0 0 40px;
    background-color: #fff;
}

.textm_6 {
    width: 32px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 24px;
    margin: 51px 360px 0 39px;
    background-color: #fff;
}

.boxm_1 {
    background-color: rgba(255, 255, 255, 1);
    width: 1920px;
    height: 110px;
}

.image_1 {
    width: 221px;
    height: 51px;
    margin: 33px 0 0 41px;
}

.label_1 {
    width: 29px;
    height: 29px;
    margin: 46px 0 0 1387px;
}

.textn_1 {
    width: 148px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 48px 80px 0 14px;
}

.boxm_2 {
    /* width: 1920px; */
    height: 971px;
    margin-bottom: 1px;
    margin-top: 73px;
}

.boxm_3 {
    background-color: rgba(255, 255, 255, 1);
    width: 804px;
    height: 819px;
    margin: 0 auto;
}

.textn_2 {
    width: 72px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin: 41px 0 0 30px;
    background-color: #fff;
}

.image_2m {
    width: 741px;
    height: 1px;
    margin: 17px 0 0 30px;
    background-color: #a9b1bcb1;
}

.section_1 {
    width: 443px;
    height: 45px;
    margin: 60px 0 0 367px;
    background-color: #fff;
}

.textn_3t {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 10px;
    background-color: #fff;
}

.textn_4 {
    width: 54px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 10px;
    background-color: #fff;
}

.text-wrapper_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 27px;
    width: 342px;
}

.textn_5 {
    width: 96px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.section_2 {
    width: 423px;
    height: 45px;
    margin: 27px 0 0 387px;
    background-color: #fff;
}

.textn_6t {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 10px;
    background-color: #fff;
}

.textn_7 {
    width: 36px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 8px;
    background-color: #fff;
}

.text-wrapper_2 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 27px;
    width: 342px;
    background-color: #fff;
}

.textn_8 {
    width: 80px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.section_3 {
    width: 423px;
    height: 45px;
    margin: 27px 0 0 387px;
    background-color: #fff;
}

.textn_9 {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 10px;
    background-color: #fff;
    margin-left: -35px;
}

.textn_10 {
    width: 36px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 8px;
    background-color: #fff;
}

.text-wrapper_3 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 63px;
    width: 342px;
}

.textn_11 {
    width: 80px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.section_4 {
    width: 423px;
    height: 45px;
    margin: 27px 0 0 387px;
    background-color: #fff;
}

.textn_12 {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 10px;
    background-color: #fff;
}

.textn_13 {
    width: 36px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 8px;
    background-color: #fff;
}

.text-wrapper_4 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 27px;
    width: 342px;
}

.textn_14 {
    width: 80px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.section_5 {
    width: 492px;
    height: 45px;
    margin: 27px 0 0 318px;
    background-color: #fff;
}

.textn_15 {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 10px;
    background-color: #fff;
}

.textn_16 {
    width: 108px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 5px;
    background-color: #fff;
}

.text-wrapper_5 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 27px;
    width: 342px;
}

.textn_17 {
    width: 80px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.section_6 {
    width: 438px;
    height: 45px;
    margin: 27px 0 0 372px;
}

.textn_18 {
    width: 10px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 12, 12, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin-top: 11px;
    background-color: #fff;
}

.textn_19 {
    width: 54px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 25px;
    margin: 10px 0 0 5px;
    background-color: #fff;
}

.boxm_4 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    width: 342px;
    height: 45px;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 27px;
}

.textn_20 {
    width: 96px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 15px 0 0 16px;
    background-color: #fff;
}

.text-wrapper_6 {
    background-color: rgba(252, 233, 232, 1);
    height: 25px;
    width: 102px;
    margin: 10px 13px 0 115px;
}

.textn_21 {
    width: 80px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(255, 0, 0, 1);
    font-size: 16px;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 4px 0 0 11px;
    background-color: #fff;
}

.text-wrapper_7 {
    background-color: rgba(217, 4, 3, 1);
    border-radius: 4px;
    height: 53px;
    width: 342px;
    margin: 33px 0 106px 468px;
}

.textn_22 {
    width: 72px;
    height: 25px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 18px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    line-height: 25px;
    margin: 14px 0 0 135px;
    background-color: rgba(217, 4, 3, 1);
    ;
}

body * {
    box-sizing: border-box;
    flex-shrink: 0;
}

body {
    font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
        Arial, PingFang SC-Light, Microsoft YaHei;
}

input {
    background-color: transparent;
    border: 0;
}

button {
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    outline: none;
    background-color: transparent;
}

button:active {
    opacity: 0.6;
}

.van-nav-bar__left:active,
.van-nav-bar__right:active {
    opacity: 1;
}

[class*='van-']::after {
    border-bottom: 0;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.justify-start {
    display: flex;
    justify-content: flex-start;
}

.justify-center {
    display: flex;
    justify-content: center;
}

.justify-end {
    display: flex;
    justify-content: flex-end;
}

.justify-evenly {
    display: flex;
    justify-content: space-evenly;
}

.justify-around {
    display: flex;
    justify-content: space-around;
}

.justify-between {
    display: flex;
    justify-content: space-between;
}

.align-start {
    display: flex;
    align-items: flex-start;
}

.align-center {
    display: flex;
    align-items: center;
}

.align-end {
    display: flex;
    align-items: flex-end;
}

.demo-ruleForma {
    width: 530px;
    background-color: #fff;
    margin: 38px 0px 0px 134px;
}

.el-form-item__label {
    background-color: #fff;
}

.el-form-item__content {
    background-color: #fff;
    position: relative;
    font-size: 14px;
    margin-top: -34px;

}

.el-radio-group {
    background-color: #fff;
}

.el-form-itema {
    height: 61px;
    width: 0px;
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
}

.el-radio__label {
    background-color: #fff;
}

.el-radio__input {
    background-color: #fff;
}

.el-form-item {
    /* margin-bottom: 22px; */
    background-color: #fff;
}

.el-select .el-input .el-select__caret {
    background-color: #fff;
}

.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    margin: 0 8px 8px 0;
    display: inline-block;
}

.el-upload-list--picture-card {
    background-color: #fff;
}


.el-icon-plus:before {
    content: "\e6d9";
    background-color: #fff;
}

.el-input__icon {
    MARGIN-TOP: 1PX;
    height: 64%;
    text-align: center;
    transition: all .3s;
    line-height: 17px;
    background-color: #fff;
}

.el-dialog__wrapper {
    background-color: rgb(129 125 125 / 47%);
}

.el-dialog {
    width: 26%;
}

el-radio {
    width: 30px;
    height: 20px;
}

.radio {
    height: 35px;
    width: 230px;
    margin-left: 71px;
    background-color: #fff;

}

.el-radio__label {
    font-size: 16px;
}

.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    cursor: pointer;
    line-height: 115px;
    vertical-align: top;
    margin: -2px 0px 0px 2px;
    /* background-color: unset; */
}


* {
    background-color: unset;
}

.el-upload el-upload--picture-card {
    margin: -1px;
}

.indexbannerbox[data-v-2f371814] {
    width: 900px;
    background: #fff;
    height: 117px;
    display: flex;
    justify-content: space-between;
    /* margin-left: 293px; */
    margin: 0 auto;
}

.headerBox {
    width: 1508px;
    background-color: #ab4a4a;
    margin-left: 121px;
}

.blockk_11[data-v-2f371814] {
    background-color: rgba(255, 255, 255, 1);
    height: 117px;
    margin-left: 139px;
}

.imagee_1[data-v-2f371814] {
    width: 220px;
    height: 62px;
    margin: 31px 0 0 0;
    background: #fff;
    position: absolute;
    left: 29px;
    top: 0;
}

.el-upload-list__item:first-child {
    margin-top: -583px;
}

.el-input__suffix {
    height: 72%;
    /* margin-top: 20px; */
    right: 5px;
    transition: all .3s;
    pointer-events: none;
}
</style>